<div class="layui-fluid">
    <div class=" layui-bg-white">
    <style>
        .layui-table-tool,.layui-table-column.layui-table-page,.layui-table-main{
            background-color: white;
        }
        .layui-table-tool-temp {
            padding-right: 0px;
        }
        .notify-msg-error{
            background-color:#db3545;color: #ffffff
        }
        .notify-msg-stopped{background-color:#6c757d;color: #ffffff}
        .notify-msg-running{background-color:#28a745;color: #ffffff}

        .status-SUCCESS,.status-RUNNING { color: #28a745; font-weight: bold; }
        .status-stopped { color: #6c757d; }
        .status-FAILED { color: #dc3545; font-weight: bold; }
        .task-card { transition: all 0.3s; border-left: 4px solid #007bff; }
        .task-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

        .h4, h4 {
            font-size: calc(1.275rem + .3vw);
        }
        .card-body {
            padding: 5px 20px;
        }
        .fa-2x {
            font-size: 4em;
        }
        .align-self-center {
            align-self: center !important;
        }
        /* 核心代码：实现d-flex justify-content-between */
        .d-flex {
            display: flex;
        }
        .maxHeight{
            max-height: 300px;
            overflow: auto;
        }
        .justify-content-between {
            justify-content: space-between;
        }
    </style>
    <fieldset class="layui-elem-field layui-bg-white" th:attr="len=${permission}">
        <legend></legend>
        <div class="layui-field-box">
            <div  class="layui-form layui-row layui-col-space16 search-criteria" lay-filter="reset-val-filter">
                <div class="layui-col-md3">
                    <div class="layui-input-wrap">
                        <input type="text" name="name" placeholder="任务名称" class="layui-input" lay-affix="clear" lay-filter="clear">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-input-wrap">
                        <input type="className" name="type" placeholder="BeanId" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <select name="status" >
                        <option value="">任务状态</option>
                        <option value="RUNNING">运行</option>
                        <option value="STOPPED">停止</option>
                        <option value="ERROR">异常</option>
                    </select>
                </div>
                <div class="layui-col-md3">
                    <select name="enabled" >
                        <option value="">是否启用</option>
                        <option value="0">禁用</option>
                        <option value="1">启用</option>
                    </select>
                </div>

                <div class="layui-btn-container layui-col-md12" style="text-align: center">
                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter="table-search">查询</button>
                    <button id="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary layui-hide" onclick="showInput(this)">
                        <i class="layui-icon layui-icon-down"></i>
                    </button>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="layui-row" style="display: flex;justify-content: flex-end;margin-bottom: 10px">
        <div class="layui-col-md2 layui-right-margin-15" >
            <div class="layui-panel layui-font-white layui-radius-5 layui-bg-blue">
                <div class="card-body ">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="run" >0</h4>
                            <p class="mb-0">运行中</p>
                        </div>
                        <div class="align-self-center">
                            <i class="layui-icon layui-icon-play fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md2 layui-right-margin-15" >
            <div class="layui-panel layui-font-white layui-radius-5 layui-bg-cyan" >
                <div class="card-body ">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="stop">0</h4>
                            <p class="mb-0">已停止</p>
                        </div>
                        <div class="align-self-center">
                            <i class="layui-icon layui-icon-pause fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md2 layui-right-margin-15" >
            <div class="layui-panel layui-font-white layui-radius-5 layui-bg-darkred" >
                <div class="card-body ">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 id="error">0</h4>
                            <p class="mb-0">异常</p>
                        </div>
                        <div class="align-self-center">
                            <i class="layui-icon layui-icon-tips-fill fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="task-list" lay-filter="task-list"></table>
    <script id="barDemo" type="text/html">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs layui-btn-link" lay-event="edit" th:if="${#arrays.contains(permission, 'infra:job:update')}">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-link" lay-event="view" >查看</a>
            <a class="layui-btn layui-btn-xs layui-btn-link" lay-event="del" th:if="${#arrays.contains(permission, 'infra:job:delete')}">删除</a>
            {{! {{# if(d.enabled == 1){  }} !}}
            <a class="layui-btn layui-btn-xs layui-btn-link" lay-event="run" >执行</a>
            <a class="layui-btn layui-btn-xs layui-btn-link" lay-event="log" >日志</a>
            {{! {{# } }} !}}
        </div>
    </script>
    <script id="dictToolbar" type="text/html">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm " lay-event="add" th:if="${#arrays.contains(permission, 'infra:job:create')}"><i class="layui-icon layui-icon-add-circle"></i>添加任务</button>
        </div>
    </script>

    <script type="text/html" id="task_form">
        <div class="layui-form" lay-filter="task_form" id="lay-task-form" style="margin: 15px 40px 15px 10px;">
            <input type="hidden" name="id">
            <fieldset class="layui-elem-field">
                <legend>基本信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务名称<span class="layui-font-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="name" disabled value="" placeholder="请输入" lay-verify="required" lay-vertype="tips" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务描述</label>
                        <div class="layui-input-block">
                            <textarea  name="description" disabled value=""  placeholder="请输入"  autocomplete="off" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field">
                <legend>执行配置</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">Cron表达式<span class="layui-font-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" id="cron" name="cronExpression" disabled value="" placeholder="请输入" lay-verify="required" lay-vertype="tips" autocomplete="off" class="layui-input">
<!--                            <div class="layui-input-suffix" style="padding: 0">-->
<!--                                <span class="layui-btn layui-btn-primary layui-border-blue layui-btn-disabled" onclick="formFun.cron()">选择</span>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Bean ID<span class="layui-font-red">*</span></label>
                        <div class="layui-input-block">
                            <input  name="className" disabled value=""  placeholder="请输入" lay-verify="required" lay-vertype="tips" autocomplete="off" class="layui-input"></input>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            Bean ID：需要实现BaseSchedulerTask抽象类的Spring Bean,在注解中指定Value。
                        </div>
                    </div>
                   <!-- <div class="layui-form-item">
                        <label class="layui-form-label">执行方法</label>
                        <div class="layui-input-block">
                            <input  name="methodName" disabled value=""  placeholder="请输入" autocomplete="off" class="layui-input"></input>
                        </div>
                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务参数</label>
                        <div class="layui-input-block">
                            <textarea  name="parameters" disabled value=""  placeholder="请输入(json格式)"  autocomplete="off" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="enabled" disabled title="启用|停用" lay-skin="switch" checked>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </script>
    <script type="text/html" id="log_info">
        <div class="layui-form" lay-filter="log_info_form" id="lay-log_info-form" style="margin: 15px 40px 15px 10px;">
            <div class="layui-card" style="padding: 0 20px">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                        <div class="grid-demo "> <h3 class="">任务名称:</h3></div>
                        <div class="grid-demo layui-font-16 "><span>{{! {{= d.taskName }} !}}</span></div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo"> <h3 class="">开始时间:</h3></div>
                        <div class="grid-demo layui-font-16 "><span>{{! {{= d.startTime }} !}}</span></div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo "> <h3 class="">结束时间:</h3></div>
                        <div class="grid-demo layui-font-16 "><span>{{! {{= d.endTime }} !}}</span></div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo"> <h3 class="">执行状态:</h3></div>
                        <div class="grid-demo layui-font-16 " >
                            <span {{! class="status-{{= d.status}}" !}}>{{! {{= d.status }} !}}</span>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo "> <h3 class="">执行耗时(ms):</h3></div>
                        <div class="grid-demo layui-font-16 "><span>{{! {{= d.executionTime }} !}}</span></div>
                    </div>
                </div>
                {{! {{# if(d.errorMessage){  }} !}}
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <div class="grid-demo">
                            <blockquote class="layui-elem-quote layui-quote-nm" style="border-color: red">
                                <h3 class="">错误信息:</h3><span>{{! {{= d.errorMessage }} !}}</span>
                            </blockquote>
                        </div>
                    </div>
                </div>
                {{! {{# } }} !}}
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <div class="grid-demo">
                            <blockquote class="layui-elem-quote layui-quote-nm" style="border-color: green">
                                <h3 class="">执行结果:</h3><span>{{! {{= d.result }} !}}</span>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">日志信息</div>
                <div class="layui-card-body maxHeight">
                    <pre class="layui-code code-demo" lay-options="{theme: 'dark'}">
                   {{! {{= d.consoleLog }} !}}
                    </pre>
                </div>
            </div>
        </div>
    </script>
    </div>
</div>

<script type="text/javascript">
    {{#
        top.tools.loadscripts(["/js/page/scheduler/task_list.js","/js/netJs/jquery.numscroll.js"], function () {
            templateViewInit();
        })
    }}
</script>